<!Doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none;}
.list1{width:880px;height:454px;overflow:hidden;}
.list1 li{width:30px;height:454px;float:left;background:#0f0;border:2px solid #000;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
	var lii=$('li');
	//console.log(lii.length);
	for(var i=0;i<lii.length;i++){
		$(lii[i]).hover(
			function(){
				//console.log(this);
				$(this).animate({
					width:730
				},1000);
			},
			function(){
				$(this).animate({
					width:30
				},1000);
			}
		)
	}
})
</script>
</head>
<body>
	<ul class="list1">
		<li class="li1"><img src="images/1.jpg"/></li>
		<li><img src="images/2.jpg"/></li>
		<li><img src="images/3.jpg"/></li>
		<li><img src="images/4.jpg"/></li>
		<li><img src="images/5.jpg"/></li>
		<li><img src="images/6.jpg"/></li>
	</ul>
</body>
</html>